<template>
  <div class="goods">
	  <p class="subtitle">
		  <slot name="title"></slot>
	  </p>
	  <div class="content">
		  <div class="item" v-for="item in mydata" :key="item.goodsId" 
		  @click="goInfo(item.goodsId)">
			  <img :src="item.goodsCoverImg" alt="">
			  <p>{{item.goodsIntro}}</p>
			  <span>￥{{item.sellingPrice}}</span>
		  </div>
	  </div>
    <!-- <h1>{{mytitle}}</h1> -->
  </div>
</template>

<script>
export default {
  name: 'Goods',
  // props:["mytitle"],
  props:{
	  mydata:{
		  type:Array,
		  required:true
	  }
  },
  methods:{
	goInfo(goodsid){
		this.$router.push("/info/"+goodsid);//params
	}
  }
}
</script>

<style lang="less">
	.subtitle{
		text-align: center;
		font-size:18px;
		height:50px;
		line-height:50px;
		color:#1BAEAE;
		background-color: #E0E0E0;
	}
	.content{
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		.item{
			width:49.8%;
			background-color: #fff;
			margin-bottom:1px;
			text-align: center;
			img{
				width:100%;
				height:200px;
			}
			p{
				font-size:16px;
				overflow : hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}
			span{
				font-size:14px;
				color:#1BAEAE;
			}
		}
	}
</style>
